<template>
  <div class="canvas-toolbar">
    <el-button-group>
      <el-tooltip content="撤销" placement="top">
        <el-button :disabled="!canUndo" @click="undo">
          <el-icon><Back /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="重做" placement="top">
        <el-button :disabled="!canRedo" @click="redo">
          <el-icon><Right /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="清空" placement="top">
        <el-button @click="clearCanvas">
          <el-icon><Delete /></el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>

    <el-divider direction="vertical" />

    <el-button-group>
      <el-tooltip content="对齐网格" placement="top">
        <el-button :type="snapToGrid ? 'primary' : ''" @click="toggleSnapToGrid">
          <el-icon><Grid /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="显示网格" placement="top">
        <el-button :type="showGrid ? 'primary' : ''" @click="toggleShowGrid">
          <el-icon><Monitor /></el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>

    <el-divider direction="vertical" />

    <el-button-group>
      <el-tooltip content="放大" placement="top">
        <el-button @click="$emit('zoomIn')">
          <el-icon><ZoomIn /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="缩小" placement="top">
        <el-button @click="$emit('zoomOut')">
          <el-icon><ZoomOut /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="适应画布" placement="top">
        <el-button @click="$emit('fitView')">
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>

    <el-divider direction="vertical" />

    <el-button type="danger" @click="clearCanvas">
      清空画布
    </el-button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Back, Right, Delete, Grid, Monitor, ZoomIn, ZoomOut, FullScreen } from '@element-plus/icons-vue'

const props = defineProps({
  snapToGrid: {
    type: Boolean,
    default: true
  },
  showGrid: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits([
  'update:snapToGrid',
  'update:showGrid',
  'clear',
  'undo',
  'redo',
  'zoomIn',
  'zoomOut',
  'fitView'
])

const canUndo = ref(false)
const canRedo = ref(false)

const snapToGridModel = computed({
  get: () => props.snapToGrid,
  set: (value) => emit('update:snapToGrid', value)
})

const showGridModel = computed({
  get: () => props.showGrid,
  set: (value) => emit('update:showGrid', value)
})

const clearCanvas = () => {
  emit('clear')
}

const undo = () => {
  emit('undo')
}

const redo = () => {
  emit('redo')
}

const toggleSnapToGrid = () => {
  snapToGridModel.value = !snapToGridModel.value
}

const toggleShowGrid = () => {
  showGridModel.value = !showGridModel.value
}

defineExpose({
  setCanUndo: (value) => canUndo.value = value,
  setCanRedo: (value) => canRedo.value = value
})
</script>

<style scoped>
.canvas-toolbar {
  padding: 8px 16px;
  border-bottom: 1px solid #e6e6e6;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-divider {
  margin: 0 8px;
}
</style> 